<template>
  <el-row class="container">
    <el-col :span="8" :class="`flex-center img-box i_${index}`">
      <img :src="data.img" alt="" />
    </el-col>
    <el-col
      :span="16"
      class="flex-center flex-column"
      style="align-items: flex-start"
    >
      <span class="f-gray">{{ data.title }}</span>
      <span
        ><span class="blod" style="font-size: 22px">{{ data.value }}</span>
        {{ data.unit }}</span
      >
      <div v-if="Number(data.num )> 0 ">
        <span class="f-gray">较昨日 </span>
        <span class="f-red">{{ data.num }} <i class="el-icon-top"></i
        ></span>
      </div>
      <div v-else-if="Number(data.num )=== 0">
        <span class="f-gray">较昨日 </span>
        <span class="f-blue blod">0 <i class="el-icon-minus"></i></span>
      </div>
      <div v-else-if="Number(data.num )<0">
        <span class="f-gray">较昨日</span>
        <span class="f-green">{{ data.num }} <i class="el-icon-bottom"></i
        ></span>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "AdminHomeToptag",

  props: {
    data: {
      type: Object,
      default: {},
    },
    index: Number,
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 252px;
  height: 92px;
  margin: 0 0 15px;
  border-radius: 3px;
  background-color: #fff;

  .el-col {
    height: 100%;
  }

  .img-box {
    position: relative;

    &.i_0::before,
    &.i_5::before {
      background-color: #4aa3f7;
    }
    &.i_1::before,
    &.i_6::before {
      background-color: #9de0f1;
    }
    &.i_2::before,
    &.i_7::before {
      background-color: #99c9a3;
    }
    &.i_3::before,
    &.i_8::before {
      background-color: #6889f5;
    }
    &.i_4::before,
    &.i_9::before {
      background-color: #6dd0be;
    }
    &.i_5::before,
    &.i_6::before,
    &.i_7::before,
    &.i_8::before,
    &.i_9::before {
      opacity: 0.7;
    }

    &::before {
      content: "";
      display: block;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      position: absolute;
      left: 14px;
      top: 18px;
    }
  }

  img {
    width: 40px;
    height: 40px;
    z-index: 1;
  }
}
</style>
<style lang="less" scoped>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.f-blue {
  color: #409eff;
}

.f-green {
  color: #67c23a;
}

.f-red {
  color: #f56c6c;
}

.f-gray {
  color: #909399;
}

.blod {
  font-weight: 700;
}
</style>
